<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="el-bread-group">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="card">
            <el-table
            :data="permissionDatas"
            stripe
            border
            style="width: 100%">
                <el-table-column
                label="#"
                type="index"> </el-table-column>
                <el-table-column
                prop="authName"
                label="权限名称"></el-table-column>
                <el-table-column
                prop="path"
                label="路径"></el-table-column>
                <el-table-column
                prop="level"
                label="权限等级">
                    <template v-slot="scoped">
                        <el-tag  v-if="scoped.row.level=== '0'">一级</el-tag>
                        <el-tag type="success" v-else-if="scoped.row.level==='1'">二级</el-tag>
                        <el-tag type="danger" v-else>三级</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
  created() {
    this.getPermissionManagements()
  },
  data() {
    return {
      permissionDatas: []
    }
  },
  methods: {
    async getPermissionManagements() {
      const pmParams = {
        url: '/rights/list'
      }
      const res = await this.$send(pmParams)
      if (res.meta.status === 200) {
        this.permissionDatas = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-bread-group{
    height: 40px;
    line-height: 40px;
    background-color: #E9EEF3;
    padding-left: 10px;
}
.el-row{
    height: 40px;
    margin-bottom: 10px;
}
.card{
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0,0,1px;
}
</style>
